<template>
    <div class="BigBox">
        <div class="Box2" @click="router.push({name: 'Temprature'})" >
            <temprature ></temprature>
            temprature
            <div style="height:5%;width:100%"> &nbsp </div>
        </div>
        <div class="Box2" @click="router.push({name: 'Virbation'})" style="overflow:auto">
            <virbation style="margin-bottom: -25px;margin-left:120px"></virbation>
<!--&nbsp-->
            <div style="height:20px;margin-top:20px;margin-bottom: 8px">virbation</div>
        </div>
        <div class="Box2" @click="router.push({name: 'Speed'})">
            <speed></speed>
            Speed
            <div style="height:5%;width:100%"> &nbsp </div>
        </div>
        <div class="Box2" @click="router.push({name: 'Noise'})" style="overflow:auto">
            <Noise :info="size" :data="dataa" @clickChild="clickEvent" style="margin-bottom: -40px;margin-left:25px"></Noise>
            <div style="height:10px;margin-bottom: 18px">speed</div>
        </div>
    </div>

</template>

<script setup>
import {reactive,onMounted,ref} from "vue";
import {useStore} from 'vuex';
import {useRouter} from 'vue-router';
const router = new useRouter();
const store = new useStore();

import Temprature from "@/views/graphicCheck/ChartView/Temprature-mini.vue";
import Virbation from "@/views/graphicCheck/ChartView/Virbation-mini.vue";
import Speed from "@/views/graphicCheck/ChartView/Speed-mini.vue";
import Noise from "@/views/graphicCheck/ChartView/Noise-mini.vue";


const size = ref("hello")       //要发送的数据
const dataa = {width:'210px',height: '220px'}
const title = {name:'设备温度'}

const result = ref('')          //要接收的数据
const clickEvent = (val) => {
    console.log(val);
}

const data = reactive({
    datas:[]
})
onMounted(()=>{
    console.log('miniCharts - mounted')
    // console.log(store.state.currentPage.deviceData)
    data.datas = store.state.currentPage.deviceData
})
</script>

<style scoped>
.BigBox{
    width:99%;
    height:400px;
    /*border:black 1px solid;*/

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
.Box{
    width:49%;
    height:35%;
    border: #666666 1px solid;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.Box2{
    width:49%;
    height:45%;
    border: #666666 1px solid;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
</style>